<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>批次管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>开启分页</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">批次列表</div>
                <div class="layui-card-body">
                    <div>
                        <form action="" style="margin-bottom: 10px" id="queryForm" class="layui-form">
                            <div class="layui-row layui-col-space10">
                                <div class="layui-col-md2">
                                    <input type="text" id="name-query" name="name" placeholder="批次名"
                                           class="layui-input">
                                </div>
                                <div class="layui-col-md2">
                                        <select name="difficultyLevel" id="difficultyLevel-query">
                                            <option value="">请选择困难等级</option>
                                        </select>
                                </div>
                                <div class="layui-col-md2">
                                    <select name="active" id="active-query">
                                        <option value="">请选择状态</option>
                                        <option value="0">未激活</option>
                                        <option value="1">激活</option>
                                    </select>
                                </div>
                                <div class="layui-col-md3">
                                    <button type="button" class="layui-btn layui-btn-normal" lay-submit=""
                                            lay-filter="batchQuery">查询
                                    </button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <table class="layui-hide" id="batchTable" lay-filter="batchTable"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<!--是否激活批次模板-->
<script id="batchActive" type="text/html">
    {{# if(d.active){ }}
    <span style="color: green">激活</span>
    {{# }else{  }}
    <span style="color: red">未激活</span>
    {{# }  }}
</script>
<!--表头工具栏模板-->
<script id="tableHeadTool" type="text/html">
    <button type="button" class="layui-btn layui-btn-normal" lay-event="add">添加批次</button>
    <button type="button" class="layui-btn layui-btn-danger" lay-event="deletes">删除选中</button>
</script>
<!--列工具栏模板-->
<script id="colTool" type="text/html">
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="detail">详情</button>
    {{# if(d.active){ }}
    <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="ban">禁用</button>
    {{# }else{  }}
    <button class="layui-btn layui-btn-warm layui-btn-sm" lay-event="active">激活</button>
    {{# }  }}
    <button class="layui-btn layui-btn-normal layui-btn-sm" lay-event="edit">编辑</button>
</script>
<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table', 'laydate'], function () {
        var admin = layui.admin
            , table = layui.table,
            form = layui.form,
            $ = layui.$,
            laydate = layui.laydate
        //页面加载的时候加载所有困难级别
        $.ajax({
            url: '/dictionary/getDictionaryByType?type=' + 'DIFFICULTY',
            type: 'get',
            success: function (res) {
                $(res.data).each(function (index, item) {
                    var $option = $("<option value='" + item.itemValue + "'>" + item.itemName + "</option>")
                    $("#difficultyLevel-query").append($option)
                })
                form.render('select')
            }
        })
        //渲染表格
        table.render({
            elem: '#batchTable',
            url: "/batchSetting/list",
            toolbar: '#tableHeadTool',
            request: {
                pageName: 'pageNo' //页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            },
            parseData: function (res) {
                //这里的res就是后端返回的数据
                return {
                    code: res.code,
                    msg: res.message,
                    count: res.data.total,
                    data: res.data.records
                }
            },
            cols: [
                [
                    {type: 'checkbox'},
                    {field: 'name', title: '批次名'}
                    , {field: 'applicationStartDate', title: '申请开始时间'}
                    , {field: 'applicationEndDate', title: '申请结束时间'}
                    , {field: 'registerStartDate', title: '登记开始时间'}
                    , {field: 'registerEndDate', title: '登记结束时间'}
                    , {field: 'difficultyValue', title: '困难等级级别'}
                    , {field: 'active', title: '当前批次', templet: '#batchActive'},
                    {fixed: 'right', title: '操作', toolbar: '#colTool'}
                ]
            ],
            page: true,
            limit: 10,
            limits: [10, 20, 40, 100]
        });
        //渲染时间
        laydate.render({
            elem: '#applyDate',
            btns: ['clear', 'confirm'],
            range: true
        })
        laydate.render({
            elem: '#chooseDate',
            btns: ['clear', 'confirm'],
            range: true
        })
        //表头工具栏事件绑定 小括号内的值是表格的lay-filter值
        table.on('toolbar(batchTable)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add':
                    addEvent()
                    break
                case 'deletes':
                    deletesEvent();
                    break
            }
        });
        //点击查询
        form.on('submit(batchQuery)', function (obj) {
            var name = $("#name-query").val()
            var dif = $("#difficultyLevel-query").val()
            var active = $("#active-query").val()
            var data = {
                name: name,
                difficultyLevel: dif,
                active: active
            }
            console.info(data)
            table.reload("batchTable", {
                url: "/batchSetting/list",
                where: data
            })
        })

        //点击删除选中
        function deletesEvent() {
            var checkStatus = table.checkStatus('batchTable');
            if (checkStatus.data.length == 0) {
                layer.msg("请至少选择一条数据", {icon: 6, time: 1500})
            } else {
                layer.confirm("是否确认删除选中的" + checkStatus.data.length + "条数据？", {title: '提示'}, function () {
                    var ids = []
                    $(checkStatus.data).each(function (index, item) {
                        ids.push(item.id)
                    })
                    var load = layer.load()
                    $.ajax({
                        type: 'get',
                        url: '/batchSetting/deletes',
                        data: {ids: ids},
                        success: function (res) {
                            if (res.status) {
                                layer.close(load)
                                layer.msg('删除成功', {icon: 6, time: 1000}, function () {
                                    layer.closeAll()
                                    //刷新
                                    table.reload("batchTable", {
                                        url: "/batchSetting/list"
                                    })
                                })
                            }
                        }
                    })
                })
            }
        }

        //绑定行工具事件
        table.on("tool(batchTable)", function (obj) {
            console.info(obj)
            var data = obj.data;//这是点击的这一行的数据
            switch (obj.event) {
                case 'detail':
                    layer.msg("详情还要我来讲？？")
                    break;
                case "ban":
                    banEvent(data)
                    break;
                case "edit":
                    editEvent(data)
                    break;
            }
        })

        //点击行编辑
        function editEvent(data) {
            //需要判断这个时间段能不能修改？？？
            //打开之前需要重置表单，jQuery中没有重置表单数据的方法，但是js有
            $('#batchEditForm')[0].reset()
            //清空下拉框，以防多次渲染
            $("#difficultyLevel-edit").empty()
            //需要渲染下拉框
            $.ajax({
                url: '/dictionary/getDictionaryByType?type=' + 'DIFFICULTY',
                type: 'get',
                success: function (res) {
                    $(res.data).each(function (index, item) {
                        var $option = $("<option value='" + item.itemValue + "'>" + item.itemName + "</option>")
                        $("#difficultyLevel-edit").append($option)
                    })
                    //渲染数据
                    $("#batch-name").val(data.name)
                    laydate.render({
                        elem: '#applyDate-edit',
                        range: true,
                        value: data.applicationStartDate + " - " + data.applicationEndDate
                    })
                    laydate.render({
                        elem: '#chooseDate-edit',
                        range: true,
                        value: data.registerStartDate + " - " + data.registerEndDate
                    })
                    $("#difficultyLevel-edit").val(data.difficultyLevel)
                    $("#edit-id").val(data.id)
                    form.render('select')
                }
            })
            layer.open({
                type: 1,
                content: $('#batchEditForm'),
                area: '500px',
                title: '编辑批次'
            });

        }

        //点击禁用
        function banEvent(data) {
            layer.confirm("是否禁用批次：" + data.name, {title: '提示'}, function () {
                var load = layer.load()
                $.ajax({
                    url: '/batchSetting/updateById?id=' + data.id,
                    type: 'get',
                    success: function (res) {
                        layer.close(load)
                        if (res.data) {
                            layer.msg('操作成功', {icon: 6, time: 3000}, function () {
                                layer.closeAll()
                                //刷新
                                table.reload("batchTable", {
                                    url: "/batchSetting/list"
                                })
                            })
                        } else {
                            layer.msg("该批次正处于使用期间，不可禁用", {icon: 6, time: 3000})
                        }
                    }
                })
            })
        }

        // 点击添加批次
        function addEvent() {
            //打开之前需要重置表单，jQuery中没有重置表单数据的方法，但是js有
            $('#batchAddForm')[0].reset()
            //清空下拉框，以防多次渲染
            $("#difficultyLevel").empty()
            //需要渲染下拉框
            $.ajax({
                url: '/dictionary/getDictionaryByType?type=' + 'DIFFICULTY',
                type: 'get',
                success: function (res) {
                    $(res.data).each(function (index, item) {
                        var $option = $("<option value='" + item.itemValue + "'>" + item.itemName + "</option>")
                        $("#difficultyLevel").append($option)
                    })
                    form.render('select')
                }
            })
            layer.open({
                type: 1,
                content: $('#batchAddForm'),
                area: '500px',
                title: '添加批次'
            });
        }

        // 添加批次中点击提交按钮
        form.on('submit(batchSave)', function (obj) {
            var applyDate = obj.field.applyDate
            var applyDates = applyDate.split(" - ");
            var chooseDate = obj.field.chooseDate
            var chooseDates = chooseDate.split(" - ")
            obj.field.applicationStartDate = applyDates[0]
            obj.field.applicationEndDate = applyDates[1]
            obj.field.registerStartDate = chooseDates[0]
            obj.field.registerEndDate = chooseDates[1]
            if (obj.field.active == 1) {
                layer.confirm("若存在已激活的批次，已激活的批次会被自动设置为未激活，是否继续？", {title: '提示'}, function () {
                    saveBatch(obj)
                })
            } else {
                saveBatch(obj)
            }
            //一定要加取消表单提交
            return false
        })
        // 修改批次提交表单
        form.on('submit(batchUpdate)', function (obj) {
            var applyDate = obj.field.applyDate
            var applyDates = applyDate.split(" - ");
            var chooseDate = obj.field.chooseDate
            var chooseDates = chooseDate.split(" - ")
            obj.field.applicationStartDate = applyDates[0]
            obj.field.applicationEndDate = applyDates[1]
            obj.field.registerStartDate = chooseDates[0]
            obj.field.registerEndDate = chooseDates[1]
            var load = layer.load();
            $.ajax({
                type: 'post',
                url: '/batchSetting/update',
                data: obj.field,
                success: function (res) {
                    if (res.status) {
                        layer.close(load)
                        layer.msg('修改成功', {icon: 6, time: 1500}, function () {
                            layer.closeAll()
                            //刷新
                            table.reload("batchTable", {
                                url: "/batchSetting/list"
                            })
                        })
                    }
                }
            })

            //一定要加取消表单提交
            return false
        })

        //提交批次表单
        function saveBatch(obj) {
            var load = layer.load();
            $.ajax({
                type: 'post',
                url: '/batchSetting',
                data: obj.field,
                success: function (res) {
                    if (res.status) {
                        layer.close(load)
                        layer.msg('添加成功', {icon: 6, time: 1000}, function () {
                            layer.closeAll()
                            //刷新
                            table.reload("batchTable", {
                                url: "/batchSetting/list"
                            })
                        })
                    }
                }
            })
        }
    });
</script>
</body>
<!--添加弹框-->
<form id="batchAddForm" style="display: none;margin-right: 30px;margin-top: 15px" class="layui-form" action="">
    <div class="layui-form-item">
        <label class="layui-form-label">批次名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">申请时间段</label>
        <div class="layui-input-block">
            <input type="text" name="applyDate" id="applyDate" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选衣时间段</label>
        <div class="layui-input-block">
            <input type="text" name="chooseDate" id="chooseDate" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">困难等级</label>
        <div class="layui-input-block">
            <select name="difficultyLevel" lay-filter="aihao">
                <!--<option value="BKN">不困难</option>-->
                <!--<option value="YBKN">一般困难</option>-->
                <!--<option value="TSKN">特殊困难</option>-->
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">是否激活</label>
        <div class="layui-input-block">
            <input type="radio" name="active" value="0" title="不激活" checked="">
            <input type="radio" name="active" value="1" title="激活">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="batchSave">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>
<!--编辑弹框-->
<form id="batchEditForm" style="display: none;margin-right: 30px;margin-top: 15px" class="layui-form" action="">
    <input type="hidden" id="edit-id" name="id">
    <div class="layui-form-item">
        <label class="layui-form-label">批次名</label>
        <div class="layui-input-block">
            <input type="text" id="batch-name" name="name" lay-verify="title" autocomplete="off" placeholder="请输入标题"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">申请时间段</label>
        <div class="layui-input-block">
            <input type="text" name="applyDate" id="applyDate-edit" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">选衣时间段</label>
        <div class="layui-input-block">
            <input type="text" name="chooseDate" id="chooseDate-edit" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">困难等级</label>
        <div class="layui-input-block">
            <select name="difficultyLevel" id="difficultyLevel-edit" lay-filter="aihao">
                <!--<option value="BKN">不困难</option>-->
                <!--<option value="YBKN">一般困难</option>-->
                <!--<option value="TSKN">特殊困难</option>-->
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="button" class="layui-btn" lay-submit="" lay-filter="batchUpdate">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


</html>